<template>
	<view class="log">
		<view class="">
			<view class="time-line">
				<u-time-line>
					<u-time-line-item nodeTop="2" v-for="(item,index) in feedLog" :key="item.id">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node" style="background: #19be6b;">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-flex u-col-center u-row-between">
									<view class="u-order-desc">
										<view class="">
											{{item.description}}
										</view>
										<view class="u-order-time">{{item.time}}</view>
									</view>
									<view class="u-order-title" v-if="item.type == 1">+{{item.weight}}g</view>
									<view class="u-order-title" v-else style="color: #F75F53;">-{{item.weight}}g</view>
								</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
		<u-loadmore :status="status" @loadmore="onreachBottom" />
	</view>
</template>

<script>
	let meta = {
		current_page: 0,
		per_page: 15
	}
	export default {
		data() {
			return {
				feedLog: [],
				status: "loadmore",
				loadText: {
					loadmore: '点击加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		onLoad() {
			uni.showLoading({
				mask:true
			})
			this.getLog()
		},
		methods: {
			onreachBottom(){
				if(meta.current_page ===meta.total_pages){
					this.status = "nomore"
					return false
				}
				this.status = "loading"
				uni.showLoading({
					mask:true
				})
				this.getLog()
			},
			getLog() {
				let params = {
					page: meta.current_page + 1,
					page_size: meta.per_page
				}
				this.$u.api.chickenFeedrecord(params).then(res => {
					this.status = "loadmore"
					uni.hideLoading()
					if (res.errno === "000") {
						this.feedLog = [...this.feedLog, ...res.result.data]
						meta = res.result.meta
					} else {
						this.status = 'nomore';
					}
				})
			}
		},
		onUnload() {
			meta.current_page = 0
		}
	}
</script>

<style>
	.log {
		width: 100vw;
		height: 100vh;
		margin: 0 auto;
	}

	.log scroll-view {
		width: 100%;
		height: 96%;
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.time-node {
		background: #ececec;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.time-line {
		width: 82%;
		margin: 0 auto;
	}
</style>
